Custom Elementsの練習
22:14:44 例: “time-formatted” | Custom elementsのsample codeを動かしてみる
/icons2/CodeSandBox.iconhttps://codesandbox.io/s/autumn-monad-6uomd?file=/package.json
22:28:11 parcelで構築されている
何故かNull条件演算子を使うとcompile errorが出る
22:30:30 /icons/javascript.iconに切り替えた
/icons2/CodeSandBox.iconhttps://codesandbox.io/s/cold-thunder-zbfz4?file=/src/index.js
Custom Elementsを試すだけだし、まあ型なしでもなんとかなるだろう
最終的にはScrapboxUserScriptで使いたいのだし
22:37:10 例: “time-formatted” | Custom elementsは動いた
CodeSandbox特有の現象
hot reloadを使うと、CustomElementRegistry.define()が二回走ってしまい、結果二重定義エラーが出てしまう
手動でF5を押せば直る
CustomElementRegistry.get()を使って既に定義済みかどうかを確認すればエラーを回避できるか。
22:44:52Custom Elementsの定義を別ファイルにしてみた
勿論ちゃんと動く
22:48:31 /icons/javascript.iconからCustom Elementsの動的追加を試してみた
問題なく追加できている
これなら、scrapbox-card-bubble-2で動的にcardを追加することもできそうだな
22:50:33 Custom elementsを試す
/icons2/CodeSandBox.iconhttps://codesandbox.io/s/hardcore-flower-1xtkl
HTMLElement.observedAttributes static propertyで、変更を監視したい属性名のリストを返す
監視対象の属性が変更されると、HTMLElement.attributeChangedCallback()が呼び出される
この中で再renderすればいい
23:04:19 Custome Elementのlife cycleを書く
23:18:59 書いた
References
Using custom elements - Web Components | MDN
#2020-12-09 22:14:50